<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .outerNode {
            width: 540px;
            height: 332px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -166px 0 0 -270px;
            box-shadow: 0 0 4px #5b606d;
        }

        .outerNode .videoNode {
            width: 540px;
            height: 305px;
            float: left;
            background: black;
        }

        .outerNode .controlsNode {
            width: 540px;
            height: 27px;
            float: left;
            background: url(images/ctrs_bg.gif) repeat-x;
        }

        .outerNode .controlsNode .playNode {
            float: left;
            width: 15px;
            height: 17px;
            margin: 6px 0 0 14px;
            background: url(images/playNode.png) no-repeat;
            cursor: pointer;
        }

        .outerNode .controlsNode .pauseNode {
            float: left;
            width: 15px;
            height: 17px;
            margin: 6px 0 0 14px;
            background: url(images/pause.png) no-repeat;
            cursor: pointer;
        }


        .outerNode .controlsNode .loadNode {
            width: 267px;
            height: 10px;
            margin: 9px 0 0 14px;
            float: left;
            background: url(images/load_bg.png) repeat-x;
            position: relative;
        }

        .outerNode .controlsNode .loadNode .lineNode {
            width: 0%;
            height: 7px;
            position: absolute;
            left: 0;
            top: 1px;
            background: url(images/line_bg.png) repeat-x;

        }

        .outerNode .controlsNode .loadNode .lineNode .lineRight {
            width: 2px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url(images/line_r_bg.png) no-repeat;
        }

        .outerNode .controlsNode .loadNode .loadLeft {
            height: 100%;
            width: 3px;
            position: absolute;
            left: 0;
            top: 0;
            background: url(images/left_bg.png) no-repeat;
            z-index: 4;
        }

        .outerNode .controlsNode .loadNode .loadRight {
            height: 100%;
            width: 3px;
            position: absolute;
            right: 0;
            top: 0;
            background: url(images/right_bg.png) no-repeat;
        }

        .outerNode .controlsNode .loadNode .crlNode {
            width: 17px;
            height: 17px;
            background: url(images/crl_bg.png);
            position: absolute;
            left: -8.5px;
            top: -3.5px;
            cursor: pointer;
            z-index: 5;
        }

        .outerNode .controlsNode .timeNode {
            float: left;
            width: 75px;
            height: 10px;
            margin: 9px 0 0 9px;
        }

        .outerNode .controlsNode .timeNode span {
            font-size: 10px;
            float: left;
            line-height: 10px;
            color: white;
        }

        .outerNode .controlsNode .volumeNode {
            width: 17px;
            height: 16px;
            float: left;
            margin: 5px 0 0 6px;
            background: url(images/volume_bg.png);
        }

        .outerNode .controlsNode .volumeLine {
            height: 8px;
            width: 61px;
            float: left;
            margin: 10px 0 0 4px;
            background: url(images/volumeLine_bg.png) repeat-x;
            position: relative;
        }

        .outerNode .controlsNode .volumeLine .v_left {
            width: 3px;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: url(images/v_left.png) no-repeat;
        }

        .outerNode .controlsNode .volumeLine .v_right {
            width: 3px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background: url(images/v_right.png) no-repeat;
        }

        .outerNode .controlsNode .volumeLine .v_DragNode {
            width: 15px;
            height: 13px;
            position: absolute;
            left: 58.5px;
            top: -3.5px;
            background: url(images/vo_d.png) no-repeat;
            cursor: pointer;
        }

        .outerNode .controlsNode .fullNode {
            width: 15px;
            height: 17px;
            float: left;
            margin: 6px 0 0 35px;
            background: url(images/full_bg.png) no-repeat;
            cursor: pointer;
            transition: 0.7s;
        }

        .outerNode .controlsNode .fullNode:hover {
            background: url(images/full_hover_bg.png) no-repeat;
        }

    </style>

</head>
<body>
<!-- 最外层的元素 -->
<div class='outerNode'>
    <!-- video元素 -->
    <video class='videoNode' src='data/imooc.mp4' poster="data/poster.jpg"></video>
    <!-- 控制器的元素 -->
    <div class='controlsNode'>
        <!-- 控制播放暂停的按钮 -->
        <div class='playNode'></div>
        <!-- video的进度条 -->
        <div class='loadNode'>
            <div class='loadLeft'></div>
            <div class='loadRight'></div>
            <!-- 拖动进度条的按钮 -->
            <div class='crlNode'></div>
            <!-- 真正的进度条 -->
            <div class='lineNode'>
                <div class='lineRight'></div>
            </div>
        </div>
        <!-- 时间的元素 -->
        <div class='timeNode'>
            <span class='now'>00:00</span>
            <span> - </span>
            <span class='all'>4:30</span>
        </div>
        <!-- 声音的标志 -->
        <div class='volumeNode'></div>
        <!-- 声音的条 -->
        <div class='volumeLine'>
            <div class='v_left'></div>
            <div class='v_right'></div>
            <div class='v_DragNode'></div>
        </div>
        <!-- 全屏的按钮 -->
        <div class='fullNode'></div>
    </div>
</div>
<script type="text/javascript">
    //播放暂停的控制
    //PlayNode 播放器按钮
    //VideoNode 播放器
    //PlayBln 控制暂停播放的布尔值
    //FullNode 全屏按钮
    //nowNode 当前时间
    //allNode 视频的全部时间
    //LineNode 当前的进度条
    //CrlNode 进度条按钮
    //LoadNode 进度条外面的元素
    var PlayNode = document.getElementsByClassName('playNode')[0],
        VideoNode = document.getElementsByClassName('videoNode')[0],
        FullNode = document.querySelector('.fullNode'),
        nowNode = document.querySelector('.now'),
        allNode = document.querySelector('.all'),
        LineNode = document.querySelector('.lineNode'),
        CrlNode = document.querySelector('.crlNode'),
        LoadNode = document.querySelector('.loadNode'),
        VDragNode = document.querySelector('.v_DragNode'),
        PlayBln = true;

    //播放、暂停的事件
    PlayNode.onclick = function () {
        //传统的通过布尔值去改变classname的方法
        PlayBln = !PlayBln;
        if (PlayBln == false) {
            this.className = 'pauseNode';
            VideoNode.play();

        } else {
            this.className = 'playNode';
            VideoNode.pause();
        }
    };

    //全屏按钮的事件
    FullNode.onclick = function () {
        if (VideoNode.webkitRequestFullscreen) {
            VideoNode.webkitRequestFullscreen();
        } else if (VideoNode.mozRequestFullScreen) {
            VideoNode.mozRequestFullScreen();
        } else {
            VideoNode.requestFullscreen();
        }
    };

    //解决最开始时间的NAN的问题
    VideoNode.addEventListener('canplay', function () {
        var needTime = parseInt(VideoNode.duration);
        var s = needTime % 60;
        var m = parseInt(needTime / 60);
        var timeNum = toDou(m) + ':' + toDou(s);
        allNode.innerHTML = timeNum;
    }, false);

    //解决 时间不足10 的问题
    function toDou(time) {
        return time < 10 ? '0' + time : time;
    }

    //当视频播放的时候 需要当前的时间动起来
    VideoNode.addEventListener('timeupdate', function () {
        //目前的 百分比进度
        LineNode.style.width = VideoNode.currentTime / VideoNode.duration * 100 + '%';
        CrlNode.style.left = LineNode.offsetWidth - 8.5 + 'px'

        var needTime = parseInt(VideoNode.currentTime);
        var s = needTime % 60;
        var m = parseInt(needTime / 60);
        var timeNum = toDou(m) + ':' + toDou(s);
        nowNode.innerHTML = timeNum;
    }, false);

    //声音的拖拽按钮
    VDragNode.onmousedown = function (e) {
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        document.onmousemove = function (e) {
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = VDragNode.parentNode.offsetWidth - 2.5;

            needX = needX < -2.5 ? -2.5 : needX;
            needX = needX > maxX ? maxX : needX;
            //计算0 - 1
            var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth;
            VideoNode.volume = lastVolume < 0 ? 0 : lastVolume;

            VDragNode.style.left = needX + 'px';
        };
        document.onmouseup = function (e) {
            document.onmousemove = document.onmouseup = null;
        }
        return false;
    }
    //拖拽进度条按钮
    CrlNode.onmousedown = function (e) {
        var ev = e || event;
        var l = ev.clientX - this.offsetLeft;
        VideoNode.pause();

        document.onmousemove = function (e) {
            var ev = e || event;
            var needX = ev.clientX - l;
            var maxX = LoadNode.offsetWidth - 8.5;

            needX = needX < -8.5 ? -8.5 : needX;
            needX = needX > maxX ? maxX : needX;
            CrlNode.style.left = needX + 'px';
            LineNode.style.width = (CrlNode.offsetLeft + 9) / LoadNode.offsetWidth * 100 + '%';


        };
        document.onmouseup = function () {
            document.onmousemove = document.onmouseup = null;
            VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft + 9) / LoadNode.offsetWidth;
            if (PlayBln == false) {
                //console.log(1);
                PlayNode.className = 'pauseNode';
                VideoNode.play();
            } else {
                //console.log(2);
                PlayNode.className = 'playNode';
                VideoNode.pause();
            }
        };
        return false;
    };

</script>
</body>
</html>
